<template>
  <tab-bar class="tab-bar"  v-show="$route.meta.isturn">
    <tab-bar-item link="/home">
      <img slot="icon" src="../../../assets/img/tabbar/icon_home.png" alt="">
      <img slot="active-icon" v-show="appType === '277'" src="../../../assets/img/tabbar/icon_home_active.png" alt="">
      <img slot="active-icon" v-show="appType === 'cat'" src="../../../assets/img/tabbar/icon_home_active_cat.png" alt="">
    </tab-bar-item>
    <tab-bar-item link="/apply">
      <img slot="icon" v-show="appType === '277'" src="../../../assets/img/tabbar/icon_more.png" alt="">
      <img slot="icon" v-show="appType === 'cat'" src="../../../assets/img/tabbar/icon_more_cat.png" alt="">
      <img slot="active-icon" v-show="appType === '277'" src="../../../assets/img/tabbar/icon_more.png" alt="">
      <img slot="active-icon" v-show="appType === 'cat'" src="../../../assets/img/tabbar/icon_more_cat.png" alt="">
    </tab-bar-item>
    <tab-bar-item link="/extension">
      <img slot="icon" src="../../../assets/img/tabbar/icon_extension.png" alt="">
      <img slot="active-icon" v-show="appType === '277'" src="../../../assets/img/tabbar/icon_extension_active.png" alt="">
      <img slot="active-icon" v-show="appType === 'cat'" src="../../../assets/img/tabbar/icon_extension_active_cat.png" alt="">
    </tab-bar-item>
  </tab-bar>
</template>

<script>
import { appType } from '../../../assets/js/app';
  import TabBar from '../../common/tabbar/TabBar'
  import TabBarItem from '../../common/tabbar/TabBarItem'

  export default {
    name: "MainTabBar",
    data() {
      return {
        appType: null
      }
    },
    created () {
      this.appType = appType();
    },
    components: {
      TabBar, TabBarItem
    }
  }
</script>

<style scoped>
  .tab-bar {
    width: 750px;
  }
</style>
